import React, { useState, useEffect } from 'react'
import { Card, Button, Table, Modal, Form, Input, Select, message } from 'antd';
import {findAllCategory} from "@/apis/category"
const { Option } = Select;

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function Category() {
  const [data, setData] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [parentId,setParentId] = useState(0)
  const [show,setShow] = useState(false)
  const [temp,setTemp] = useState([])
  useEffect(()=>{
    fetchData(parentId)
  },[parentId])

  const fetchData =async (parentId)=>{
    const res = await findAllCategory(parentId)
    console.log(res);
    setData(res.data.data.data)
  }
  const handleOk = () => {
    
  };

  const handleCancel = () => {
    setIsModalVisible(false)
  };

  const onTypeChange =async (value)=>{
    if(value=="二级分类"){
      setShow(true)
      const res = await findAllCategory(0)
      setTemp(res.data.data.data)
    }
  }

  const onFinish = (values)=>{
    values.parentId = values.parentId?values.parentId:0
    console.log(values);

  }

  const findSubsCategory = (value)=>{
    console.log(value._id);
    setParentId(value._id)
  }

  // 表头
  const columns = [
    {
      title: '类型名字',
      dataIndex: 'name',
      align: 'center',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '类别',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '操作',
      render: (pa1, pa2) => {
        return (
          <>
            {parentId==0?<Button type='primary' onClick={()=>findSubsCategory(pa1)}>查看子分类</Button>:null}
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button>删除</Button>
          </>
        )
      }
    },
  ];
  return (
    <>
      <Card
        title={parentId==0?"分类列表":<Button onClick={()=>setParentId(0)} type='dashed'>返回</Button>}
        extra={<Button onClick={()=>setIsModalVisible(true)} type='default'>添加</Button>}
        style={{
          width: "100%",
        }}
      >
        <Table
          columns={columns}
          dataSource={data}
          bordered
          pagination={{defaultCurrent:1,defaultPageSize:8,showQuickJumper:true,showSizeChanger:true,pageSizeOptions:[8,16]}}
        />
      </Card>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form {...layout} name="control-hooks" onFinish={onFinish}>
          <Form.Item
            name="name"
            label="分类名字"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="type"
            label="分类类型"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="分类类型"
              onChange={onTypeChange}
              allowClear
            >
              <Option value="一级分类">一级分类</Option>
              <Option value="二级分类">二级分类</Option>
            </Select>
          </Form.Item>
          {show?<Form.Item
            name="parentId"
            label="父级分类"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="请选中父级分类"
              allowClear
            >
              {temp.map(item=>{
                return <Option value={item._id}>{item.name}</Option>
              })}
              
            </Select>
          </Form.Item>:null}
          
          
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
